<!--
 * @页面名称: 实时消息
 * @描述:
 * @作者: 辛慰
 * @Date: 2019-06-03 16:40:30
 -->
<template>
  <div class="wrap">
    <topHeader />
    <div class="contanier">
      <div class="content">
        <div class="tab-page">
          <div class="tab-content">
            <el-table
              :data="tableData"
              highlight-current-row
              border
              height="100%"
              size="mini"
              style="width: 100%">
              <slot v-for="(item,index) in Classcolumns">
                <el-table-column
                  v-if="item.field!=='type' && item.field!=='datetime'"
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                </el-table-column>
                <el-table-column
                  v-if="item.field==='type'"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                  <template slot-scope="scope">
                    <div>{{ scope.row.type | changeType }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="item.field==='datetime'"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip
                  sortable>
                  <template slot-scope="scope">
                    <div>{{ scope.row.datetime | moment('YYYY-MM-DD') }}</div>
                  </template>
                </el-table-column>
              </slot>
            </el-table>
            <el-pagination
              :small="true"
              @current-change="pageCurrentChange"
              :current-page="pageIndex"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import topHeader from '@/components/public/topHeader'
export default {
  filters: {
    changeType: function (type) { // 过滤器,用来转换设备消息中的表格类型
      if (type === 0) {
        return '移动侦测'
      } else if (type === 1) {
        return '门禁'
      } else if (type === 2) {
        return 'rfid'
      }
    }
  },
  data () {
    return {
      tableData: [],
      Classcolumns: [
        {
          title: '消息标题',
          field: 'message'
        },
        {
          title: '消息类别',
          field: 'type'
        },
        {
          title: '生成时间',
          field: 'datetime'
        }
      ],
      pageIndex: 1,
      pageSize: 20,
      total: 10 // 分页总数据
    }
  },
  components: {
    topHeader
  },
  created () {
    this.getLiveFeed()
  },
  methods: {
    // 获取实时消息
    getLiveFeed () {
      this.$http.post('/api/Device/GetDeviceEventList', {
        pagesize: this.pageSize,
        pageindex: this.pageIndex,
        starttime: moment().subtract(2, 'days').format('YYYY-MM-DD'), // 获取前两天日期
        endtime: moment().format('YYYY-MM-DD')
      }).then((res) => {
        this.tableData = res.data.data.records
        this.total = res.data.data.totalcount
      })
    },
    // 切换分页
    pageCurrentChange (val) {
      this.pageIndex = val
      this.getLiveFeed()
    }
  }
}
</script>

<style scoped>
.contanier {
  height: calc( 100% - .8rem );
  background: #f3f3f3;
}
.content {
  width: 100%;
  height: 100%;
  padding: 0 .2rem .2rem;
  box-sizing: border-box;
}
.tab-page {
  background: #fff;
  margin-top: .2rem;
  color: #333;
}
.tab-content {
  height: 6rem;
}
</style>
